<template>
  <transition :name="transition">
    <div
      v-show="visible"
      :class="[
        `${classPrefix}__wrapper`,
        modal && `${classPrefix}__wrapper--noModal`,
      ]"
      @click.self="handleWrapperClick"
    >
      <div :class="[classPrefix,fullscreen&&`${classPrefix}--fullscreen`]" :key="key" :style="style">
        <div
          :class="[
            `${classPrefix}__header`,
            center && `${classPrefix}__header--center`,
          ]"
          :style="headerStyle"
        >
          <slot name="title">
            <span :class="[`${classPrefix}__title`]">{{ title }}</span>
          </slot>
          <button
            :class="`${classPrefix}__headerbtn`"
            v-show="showClose"
            @click="handleClose"
          >
            <bf-icon name="close"></bf-icon
            >
          </button>
        </div>
        <div :class="`${classPrefix}__body`"><slot></slot></div>
        <div
          :class="[
            `${classPrefix}__footer`,
            center && `${classPrefix}__footer--center`,
            fullscreen && `${classPrefix}__footer--fullscreen`,
          ]"
          v-if="$slots.footer"
        >
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
// 功能基本完成,还差动画开始前事件,动画结束后事件,ESC按键关闭事件
import Config from "/src/config";
export default {
  name: "Dialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "提示",
    },
    top: {
      type: String,
      default: "15vh",
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    transition: {
      type: String,
      default: "DialogFade",
    },
    width: {
      type: String,
      default: "50%",
    },
    // 全屏dialog
    fullscreen:{
        type:Boolean,
        default:false
    },
    // 头部背景颜色
    headerColor:{
        type:String,
        default:''
    },
    center: {
      type: Boolean,
      default: false,
    },
    modal: {
      type: Boolean,
      default: false,
    },
    //点击遮罩层关闭
    closeOnClickModal: {
      type: Boolean,
      default: true,
    },
    //关闭之前的回调
    beforeClose: Function,
    //关闭是否销毁元素
    destroyOnClose: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      classPrefix: Config.classPrefix + "-dialog",
      rendered: false,
      key: 0,
      closed:false,
    };
  },
  mounted() {
  },
  watch: {
    visible(val) {
      if (val) {
          this.closed = false;
        this.$emit("open");//打开的回调
      } else {
         if (!this.closed) this.$emit('close');
        if (this.destroyOnClose) {
          this.$nextTick(() => {
            this.key++;
          });
        }
      }
    },
  },
  computed: {
    style() {
      let style = {};
      style.marginTop = this.top;
      style.width = this.width;
      return style;
    },
    headerStyle(){
        let style = {}
        style.backgroundColor = this.headerColor
        return style
    }
  },
  methods: {
    handleClose() {
      if (typeof this.beforeClose == "function") {
        this.beforeClose(this.hide);
      } else {
        this.hide();
      }
    },
    handleWrapperClick() {
      if (!this.closeOnClickModal) return;
      this.handleClose();
    },
    hide(cancel) {
      if (cancel !== false) {
        this.$emit("update:visible", false);
        this.$emit("close"); //关闭的回调
        this.closed = true;
      }
    },
  },
};
</script>